<!DOCTYPE html>
<!--
  Copyright 2016 Google Inc. All rights reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->
<html class="mdl-typography">
  <head>
    <meta charset="utf-8">
    <title>MDL Select Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
    <style type="text/css">
      .mdl-theme--dark {
        background-color: #303030;
      }

      #demo-wrapper {
        padding: 4px;
        padding-left: 0;
      }

      /* Hack to work around style-loader asynchronously loading styles. */
      /* Equivalent to using mdl-typography's subheading2, which is used in the sass file. */
      .mdl-select {
        font-family: Roboto, sans-serif;
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: .04em;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>MDL select</h1>
      <section>
        <h2>Fully-Featured Component</h2>
        <section id="demo-wrapper">
          <div id="js-select" class="mdl-select" role="listbox" tabindex="0">
            <span class="mdl-select__selected-text">Pick a food group</span>
            <div class="mdl-simple-menu mdl-select__menu">
              <ul class="mdl-list mdl-simple-menu__items">
                <li class="mdl-list-item" role="option" id="grains" tabindex="0">
                  Bread, Cereal, Rice, and Pasta
                </li>
                <li class="mdl-list-item" role="option" id="vegetables" tabindex="0">
                  Vegetables
                </li>
                <li class="mdl-list-item" role="option" id="fruit" tabindex="0">
                  Fruit
                </li>
                <li class="mdl-list-item" role="option" id="dairy" tabindex="0">
                  Milk, Yogurt, and Cheese
                </li>
                <li class="mdl-list-item" role="option" id="meat" tabindex="0">
                  Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
                </li>
                <li class="mdl-list-item" role="option" id="fats" tabindex="0">
                  Fats, Oils, and Sweets
                </li>
              </ul>
            </div>
          </div>
        </section>
        <p>Currently selected: <span id="currently-selected">(none)</span></p>
        <div>
          <input type="checkbox" id="dark-theme">
          <label for="dark-mode">Dark Theme</label>
        </div>
        <div>
          <input type="checkbox" id="rtl">
          <label for="rtl">RTL</label>
        </div>
        <div>
          <input type="checkbox" id="disabled">
          <label for="disabled">Disabled</label>
        </div>
      </section>
      <section>
        <h2>CSS Only</h2>
        <select class="mdl-select">
          <option value="" default selected>Pick a food group</option>
          <option value="grains">Bread, Cereal, Rice, and Pasta</option>
          <option value="vegetables">Vegetables</option>
          <option value="fruit">Fruit</option>
          <option value="dairy">Milk, Yogurt, and Cheese</option>
          <option value="meat">Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts</option>
          <option value="fats">Fats, Oils, and Sweets</option>
        </select>
      </section>
      <section>
        <h2>Custom Menu + Native Menu on mobile</h2>
        <em>
          TODO: Present both, maybe have a wrapper element that switches between both and
          keeps them in sync?
        </em>
      </section>
    </main>
    <script src="assets/material-design-lite.js"></script>
    <script>
      (function() {
        var MDLSelect = mdl.select.MDLSelect;
        var root = document.getElementById('js-select');
        var currentlySelected = document.getElementById('currently-selected');
        var select = MDLSelect.attachTo(root);
        root.addEventListener('MDLSelect:change', function() {
          var item = select.selectedOptions[0];
          var index = select.selectedIndex;
          currentlySelected.textContent = '"' + item.textContent + '" at index ' + index;
        });

        var demoWrapper = document.getElementById('demo-wrapper');
        var darkThemeCb = document.getElementById('dark-theme');
        var rtlCb = document.getElementById('rtl');
        var disabledCb = document.getElementById('disabled');

        darkThemeCb.addEventListener('change', function() {
          demoWrapper.classList[darkThemeCb.checked ? 'add' : 'remove']('mdl-theme--dark');
        });
        rtlCb.addEventListener('change', function() {
          if (rtlCb.checked) {
            demoWrapper.setAttribute('dir', 'rtl');
          } else {
            demoWrapper.removeAttribute('dir');
          }
        });
        disabledCb.addEventListener('change', function() {
          select.disabled = disabledCb.checked;
        });
      })();
    </script>
  </body>
</html>
